<template>
	<view class="page" :style="{'padding-top':mt+'px'}">
		<c-nav-bar :title="title" ></c-nav-bar>
		<image :src="headImgs[0]" class="headImg"></image>
		<view class="content">
			<view class="title">上海出发</view>
			<view v-for="(item,index) in linsData" :key="index" class="lineDetail">
				<view class="tit">
					<image :src="num1" class="num"></image>
					<view class="txt">
						<text>上海虹桥长途西站</text>
						<image :src="jt"></image>
						<text>泗礁岛</text>
					</view>
				</view>
				<view class="subtit">出行路线：</view>
				<view class="p" style="margin-bottom: 40rpx;">
					从上海出发去嵊泗的游客，先到达上海虹桥长途西站，之
					后购买上海虹桥长途西站到达嵊泗的车船联票，乘坐直达
					嵊泗的水陆联运专线到达沈家湾客运码头，然后乘坐相应
					船班可直达泗礁岛李柱山码头。
				</view>
				<view class="p">
					到达上海虹桥长途西站的交通：
				</view>
				<view class="lineMark">
					城市地铁
				</view>
				<view class="p">
					地铁二号线、十号线、十七号线 (虹桥火车站)
				</view>
				<view class="lineMark">
					市内公交
				</view>
				<view class="p" style="margin-bottom: 40rpx;">
					西交通中心(虹南快线、莘虹快线、835路、189 (区间)、
					虹练定班线、闵行23路、173路、虹桥枢纽10路区间、虹
					桥枢纽10路、虹桥枢纽8路、虹桥枢纽7路、虹桥权纽6路、
					虹桥枢纽5路、虹桥枢纽1路、320(夜间) ) ;东交通中心(闵
					行18路、虹桥商务1路、941路、虹桥枢纽9路、虹桥枢纽
					4路、机场1线、316路 (夜间) ) 。
				</view>
				<view class="timeTit">
					上海虹桥长途西站发车时间：
				</view>
				<view class="time">
					12:10、17:20
				</view>
				<view class="timeTit">
					沈家湾客运码头船班时间：
				</view>
				<view class="time">
					16:00、20:00
				</view>
				<view class="dashed"></view>
				<view class="subtit">返程路线：</view>
				<view class="p">
					在嵊泗本岛的李柱山码头购买回上海虹桥的车船联票，到
					达沈家湾客运码头之后，在沈家湾客运码头陆上站场乘坐
					到达上海虹桥长途西站的大巴车。
				</view>
				<view class="timeTit">
					李柱山码头船班时间:：
				</view>
				<view class="time">
					8:20、13:00
				</view>
				<view class="timeTit">
					沈家湾客运码头陆上站场发车：
				</view>
				<view class="time">
					9:30、14:20
				</view>
				<view class="dashed"></view>
				<!-- 站点信息 -->
				<view class="sopotInfo">
					<view class="item">
						<view class="t">上海虹桥长途西站</view>
						<view class="address">地址：上海闵行区申虹路298号</view>
						<view class="address">服务热线: 021-34661821</view>
						<image :src="banner"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				title:'入岛指南',
				banner: "https://i.ringzle.com/file/20231101/1e8e4f0dfa6342829b1a6c53fced1c6b.png",
				headImgs: ['https://i.ringzle.com/file/20231102/6ea9f9fd3e3640eb80b5e6fb1f712afe.png',
					'https://i.ringzle.com/file/20231102/1d7521bd274b4b02921235f8d333b430.png',
					'https://i.ringzle.com/file/20231102/263ff7379e1944a0ae074b35869a58b7.png',
					'https://i.ringzle.com/file/20231102/7b02c24fcbdc43249d8b16f3a78ca87c.png',
					'https://i.ringzle.com/file/20231102/77e842ea4a8c4c70b573b7f342c66ee9.png',
					'https://i.ringzle.com/file/20231102/32cce44c92e94141ab53130e30f2bd6a.png'
				],
				jt:'https://i.ringzle.com/file/20231124/4fac94abacfc4c0baed3db29a9378236.png',
				num1:'https://i.ringzle.com/file/20231124/7af51120700f49b1beb3077d26d43169.png',
				num2:'https://i.ringzle.com/file/20231124/44235382557840e9b1a876dd64d5af5a.png',
				linsData: [1],
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #CAF2FF;
		// padding-top: 130rpx;
		padding-bottom: 50rpx;
	}

	.headImg {
		height: 75px;
		width: 95%;
		margin: 20px 0 -30px 3%;
	}

	.content {
		position: relative;
		width: 94%;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 108rpx 24rpx 50rpx;
		box-sizing: border-box;
		background-color: #fff;

		.title {
			position: absolute;
			left: 50%;
			top: 0;
			font-size: 32rpx;
			font-weight: bold;
			transform: translate(-50%, 0);
			width: 490rpx;
			margin: 0 auto;
			height: 72rpx;
			border-radius: 0 0 80rpx 80rpx;
			text-align: center;
			line-height: 72rpx;
			color: #fff;
			background:#007A69 ;
		}

		.sopotInfo {
			color: #333;

			.t {
				font-size: 28rpx;
				font-weight: bold;
				padding-top: 30rpx;
			}

			.address {
				margin: 10rpx 0;
				font-size: 26rpx;
			}

			image {
				width: 100%;
				height: 320rpx;
			}
		}

		.lineDetail {
			.tit {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;

				.num {
					width:88rpx;height:82rpx;
					// letter-spacing: 4px;
					// font-size: 64rpx;
					// color: #007A69;
					// font-style: italic;
					// font-family: fantasy;
					// padding-right: 6px;
				}

				.txt {
					padding: 0 15px;
					border-radius: 0 12px 12px 0;
					height: 25px;
					line-height: 25px;
					color: #fff;
					background: linear-gradient(to left, #FF7D43, #FEA92D);
					width: 100px;
					flex: 1;
					max-width: 240px;
					margin-left: 12px;
					

					image {
						height: 19rpx;
						width: 48rpx;
						margin: 0 16rpx;
					}

				}

			}

			.dashed {
				margin: 40rpx 0 10rpx;
				border: 2rpx dashed rgba(153, 153, 153, 0.35);
			}

			.subtit {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin: 40rpx 0 10rpx;
			}

			.p {
				font-size: 26rpx;
				line-height: 40rpx;
				color: #333;
			}

			.timeTit {
				margin: 40rpx 0 10rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333;
			}

			.time {
				font-size: 26rpx;
			}

			.lineMark {
				margin: 32rpx 0 20rpx;
				background-color: rgba(13, 191, 253, 0.03);
				border: 1rpx solid rgba(13, 191, 253, 0.20);
				position: relative;
				width: 160rpx;
				padding-left: 10rpx;
				font-weight: bold;
				height: 40rpx;
				line-height: 40rpx;
				color: #333;
				font-size: 26rpx;

				&::after {
					position: absolute;
					width: 4rpx;
					height: 100%;
					box-sizing: border-box;
					content: "";
					display: inline-block;
					background-color: #007A69;
					left: -10rpx;
					top: 0
				}
			}
		}
	}
</style>